<template>
  <div class="mv-definition">
    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>基本信息</span>
      </template>
      <el-descriptions-item label="指标名称">{{ matrix.name || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标简称">{{ matrix.abbreviationAlias || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标定义">{{ matrix.indexDefine || '--' }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>业务标准</span>
      </template>
      <el-descriptions-item label="指标用途">{{ matrix.indexFunction || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标来源">{{ matrix.indexSource || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标分类">{{ matrix.indexType || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标极限">{{ matrix.indexLimit || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标标签">
        <el-tag v-for="(item, i) in labels" :key="i" size="small">{{ item }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>数据标准</span>
      </template>
      <el-descriptions-item label="计算公式">{{ matrix.formula || '--' }}</el-descriptions-item>
      <el-descriptions-item label="单位">{{ matrix.unit || '--' }}</el-descriptions-item>
      <el-descriptions-item label="频率">{{ matrix.frequency || '--' }}</el-descriptions-item>
      <el-descriptions-item label="需求维度">{{ matrix.dimension || '--' }}</el-descriptions-item>
      <el-descriptions-item label="数据精度">{{ matrix.dataAccuracy || '--' }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  props: {
    matrix: { type: Object, default: () => ({}) },
  },
  computed: {
    labels() {
      return this.matrix.indexLabel ? this.matrix.indexLabel.split(',') : []
    },
  },
}
</script>
<style lang="scss" scoped>
.mv-definition {
  padding: 20px;

  ::v-deep .el-descriptions {
    margin-top: 16px;
    .el-descriptions__header {
      margin-bottom: 12px;
      .el-descriptions__title {
        display: flex;
        align-items: center;
        .svg-icon {
          font-size: 20px;
          margin-right: 8px;
        }
      }
    }

    .el-descriptions__body {
      padding-left: 16px;

      .el-descriptions-item__content {
        display: block;
        .el-tag {
          margin-bottom: 8px;
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
